package com.wechat.app.ui.screens.contacts

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Person
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import com.wechat.app.models.Contact
import com.wechat.app.models.MockContacts
import com.wechat.app.ui.components.InitialsAvatar
import com.wechat.app.ui.navigation.navigateToProfile

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ContactsScreen(modifier: Modifier = Modifier) {
    val contacts = remember { MockContacts.contacts }
    val groupedContacts = remember {
        contacts.groupBy { it.indexLetter }
            .toSortedMap()
    }
    
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("通讯录") },
                actions = {
                    IconButton(onClick = { /* TODO: Add */ }) {
                        Icon(Icons.Default.Add, contentDescription = "添加")
                    }
                },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.background
                )
            )
        }
    ) { paddingValues ->
        LazyColumn(
            modifier = modifier
                .fillMaxSize()
                .padding(paddingValues)
        ) {
            // Top items
            item {
                TopContactItem("新的朋友", Icons.Default.Person)
                Divider()
            }
            item {
                TopContactItem("群聊", Icons.Default.Person)
                Divider()
            }
            item {
                TopContactItem("标签", Icons.Default.Person)
                Divider()
            }
            item {
                TopContactItem("公众号", Icons.Default.Person)
                Spacer(modifier = Modifier.height(8.dp))
            }
            
            // Contacts grouped by letter
            groupedContacts.forEach { (letter, contacts) ->
                item {
                    SectionHeader(letter)
                }
                items(contacts) { contact ->
                    ContactItem(contact = contact) {
                        navigateToProfile(contact.name, contact.avatarUrl ?: "")
                    }
                    Divider(modifier = Modifier.padding(start = 72.dp))
                }
            }
        }
    }
}

@Composable
fun TopContactItem(name: String, icon: androidx.compose.ui.graphics.vector.ImageVector) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable { }
            .padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .clip(RoundedCornerShape(4.dp)),
            contentAlignment = Alignment.Center
        ) {
            Surface(
                color = MaterialTheme.colorScheme.primary,
                modifier = Modifier.fillMaxSize()
            ) {
                Icon(
                    imageVector = icon,
                    contentDescription = name,
                    modifier = Modifier.padding(8.dp),
                    tint = MaterialTheme.colorScheme.onPrimary
                )
            }
        }
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = name,
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

@Composable
fun SectionHeader(letter: String) {
    Surface(
        color = MaterialTheme.colorScheme.surfaceVariant,
        modifier = Modifier.fillMaxWidth()
    ) {
        Text(
            text = letter,
            style = MaterialTheme.typography.labelSmall,
            color = MaterialTheme.colorScheme.onSurfaceVariant,
            modifier = Modifier.padding(horizontal = 16.dp, vertical = 4.dp)
        )
    }
}

@Composable
fun ContactItem(contact: Contact, onClick: () -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .clickable(onClick = onClick)
            .padding(horizontal = 16.dp, vertical = 12.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        if (contact.avatarUrl != null && contact.avatarUrl!!.isNotEmpty()) {
            // TODO: Load image from URL if needed
            InitialsAvatar(name = contact.name, size = 40.dp)
        } else {
            InitialsAvatar(name = contact.name, size = 40.dp)
        }
        Spacer(modifier = Modifier.width(12.dp))
        Text(
            text = contact.name,
            style = MaterialTheme.typography.bodyLarge
        )
    }
}

